<template>
  <div class="success-con">
    <div class="medal-imgs">
      <input
        id="upfile"
        ref="file"
        type="file"
        style="display: none"
        accept="image/png, image/jpeg"
        @change="selectFile"
      />
      <div class="medal-bg" @click="triggerFile"><img src="/assets/imgs/upload-btn.png" alt="" /></div>

      <div class="medal-bg" @click="buildAvatar"><img src="/assets/imgs/avatars-btn.png" alt="" /></div>
    </div>
    <div class="medallist">
      <div class="medal-bg" @click="buildPoster"><img src="/assets/imgs/poster-btn.png" alt="" /></div>
    </div>
    <div class="toClickMedal">
      <div class="medal-bg" @click="buildPoster"><img src="/assets/imgs/favourite.png" alt="" /></div>
    </div>
    <transition name="fade">
      <div class="mask" v-if="isShowPoster"></div>
    </transition>
    <div ref="poster" class="success-dialog" :style="isShowPoster && 'transform: scale(1.03)'">
      <div class="success-dialog-con">
        <div class="tipsdiv">
          <p class="tips1">{{ context[clickHasMedal ? clickMedalNum : 4] }}</p>
        </div>
        <transition name="fade">
          <div class="mask" v-if="isShowAvator"></div>
        </transition>
        <div ref="avatar" class="avatar-bg" :style="isShowAvator && 'transform: scale(2.0)'">
          <img class="avatarImg" :src="avatarImg" :alt="avatarImg" />
          <img class="medalSrc" v-show="clickHasMedal" :src="medalSrc[clickMedalNum]" />
          <img class="sloganSrc" :src="sloganSrc[clickMedalNum]" />
        </div>
        <div class="bottom-con">
          <img class="ewm-img" src="/assets/imgs/ewm.png" />
          <div class="tip23">
            <p class="tips2">打开央视频关注“奥运来了”</p>
            <p class="tips3">期待2022北京冬奥奖牌发布</p>
          </div>
        </div>
      </div>
    </div>
    <div v-if="isShowShare" class="poster-imgs">
      <div class="poster-container">
        <p class="downTips">长按保存{{ isShowAvator ? "头像" : "海报" }}到相册！</p>
        <img class="share-img" :src="shareImg" />
        <img class="close-icon" src="../assets/close.png" alt="" @click="handleCloseMask" />
      </div>
    </div>
  </div>
</template>

<script>
import html2canvas from "html2canvas"
import AlloyCrop from "alloycrop"
export default {
  name: "successdialog",
  data() {
    return {
      posterImgName: "海报", // 最终生成的海报图片名称
      avatarImg: "/assets/imgs/avator_defalult.png",
      context: [
        "2002年盐湖城冬奥会的奖牌形状仿佛犹他河的鹅卵石，造型兼具现代和乡村风格，颇有美国西部精神。这也是冬奥会首次根据项目的差异在奖牌上采用不同的图案。",
        "2006年都灵冬奥会采用圆环形的奖牌可以说是一次十分能够彰显意大利文化特色的创新，而丝带也可穿过中间的圆环系在奖牌上，圆环形的造型与意大利最著名、最具有标志性的广场十分相似。",
        "2014年索契冬奥会奖牌银白色的镂空镶嵌设计，其上绘有花纹繁复的索契风光，阳光、雪山、沙滩，细腻而精美，颇具精致、典雅之美感，被不少人称赞为最美冬奥会奖牌。",
        "2018年平昌冬季奥运会奖牌正面左上方采用奥运五环图案，周围用充满活力的斜线填充，体现“奥运健儿的汗水与忍耐”精神。背面印有奥运标志和具体项目名称。",
        "祥云环绕，雪花装点，五环同心！北京2022年冬奥会奖牌，正面圆环取意传统弦纹玉璧，背面取意古代天文图，挂带采用传统桑蚕丝织造工艺……细节满满！有心了！",
      ],
      medalSrc: [
        "/assets/imgs/avatars-medal_01.png",
        "/assets/imgs/avatars-medal_02.png",
        "/assets/imgs/avatars-medal_03.png",
        "/assets/imgs/avatars-medal_04.png",
        "/assets/imgs/avatars-medal_05.png",
      ],
      sloganSrc: [
        "/assets/imgs/avatar_tip_1.png",
        "/assets/imgs/avatar_tip_2.png",
        "/assets/imgs/avatar_tip_3.png",
        "/assets/imgs/avatar_tip_4.png",
        "/assets/imgs/avatar_tip_1.png",
      ],
      isShowShare: false,
      shareImg: "",
      isShowPoster: false,
      isShowAvator: false,
      mantle: null,
    }
  },
  props: {
    clickHasMedal: {
      type: Boolean,
      default: true,
    },
    clickMedalNum: {
      type: Number,
      default: 4,
    },
  },
  mounted() {
    this.mantle = document.getElementById("mantle")
  },
  methods: {
    triggerFile() {
      const file = this.$refs.file
      file.click()
    },
    selectFile(ev) {
      const formData = new FormData()
      formData.append("file", ev.target.files[0])

      const reader = new FileReader()
      reader.readAsDataURL(ev.target.files[0])

      const that = this
      const mantle = document.getElementById("mantle")
      mantle && (mantle.style.display = "block")

      reader.onload = function () {
        let strss = `${this.result}`

        var mAlloyCrop = new AlloyCrop({
          image_src: strss,
          width: 350,
          height: 350,
          output: 1.5,
          className: "crop_result",
          ok_text: "确定", // optional parameters , the default value is ok
          cancel_text: "取消",
          ok: (base64) => {
            that.avatarImg = base64

            mAlloyCrop.destroy()
            mantle && (mantle.style.display = "none")
          },
          cancel: function () {
            mAlloyCrop.destroy()
            mantle && (mantle.style.display = "none")
          },
        })
      }
      reader.onerror = function () {
        const mantle = document.getElementById("mantle")
        mantle && (mantle.style.display = "none")
      }
    },
    handleClose() {
      this.isShowAvator = false
      this.isShowShare = false
      this.isShowPoster = false
    },
    buildPoster() {
      this.isShowPoster = true
      this.isShowShare = true
      this.downPoster()
    },
    downPoster() {
      setTimeout(() => {
        const dom = this.$refs.poster

        this.isShowShare = true
        html2canvas(dom, {
          scale: 10,
          allowTaint: true,
          useCORS: true,
        }).then((canvas) => {
          this.shareImg = `${canvas.toDataURL()}`
        })
      }, 500)
    },
    changeTextDescribe(index) {
      this.selectId = index
    },
    buildAvatar() {
      // 生成头像
      this.isShowAvator = true
      const dom = this.$refs.avatar

      setTimeout(() => {
        html2canvas(dom, {
          scale: 10,
          allowTaint: true,
          useCORS: true,
        }).then((canvas) => {
          this.isShowShare = true
          this.shareImg = `${canvas.toDataURL()}`
        })
      }, 100)
    },
    handleCloseMask() {
      this.isShowShare = false
      this.isShowPoster = false
      this.isShowAvator = false
    },
  },
}
</script>

<style lang="scss" scoped>
.success-con {
  position: absolute;
  bottom: 0;
  .success-dialog {
    background-image: url("/assets/imgs/success-dialog.png");
    background-size: 100%;
    width: 80vw;
    height: 110vw;
    position: absolute;
    bottom: 33vh;
    left: 10vw;

    .success-dialog-con {
      width: 58vw;
      height: 74vw;
      margin: 24vw auto 0;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      p {
        color: white;
        font-size: 10px;
        text-align: left;
        line-height: 1.6em;
      }
      .tipsdiv {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 40%;
        .tips1 {
          margin: 0 8px;
        }
      }

      .tips2 {
        margin-bottom: 0;
      }

      .tips3 {
        margin-top: 0;
      }
      .bottom-con {
        display: flex;
        margin-bottom: 7px;
        .ewm-img {
          width: 45px;
          height: 45px;
          margin: 0 10px;
        }
      }
      .avatar-bg {
        margin-top: auto;
        margin-bottom: 5px;
        background-image: url("/assets/imgs/avatars-bg.png");
        background-size: 100%;
        width: 32vw;
        height: 36vw;
        position: relative;

        .avatarImg {
          width: 29vw;
          height: 29vw;
          margin-top: 4vw;
          border-radius: 15px;
        }
        .medalSrc {
          position: absolute;
          top: 0px;
          left: 0px;
          width: 9vw;
          height: 9vw;
        }
        .sloganSrc {
          position: absolute;
          bottom: 1vw;
          left: 1vw;
          width: 30vw;
        }

        /*img {*/
        /*  width: 80vw;*/
        /*}*/
      }
    }
  }
  .toClickMedal {
    width: 100vw;
    position: absolute;
    bottom: 14vh;

    .medal-bg {
      width: 30vw;
      margin: 0 auto;

      img {
        width: 100%;
      }
    }

    img {
      pointer-events: none;
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
  }
  .medallist {
    width: 100vw;
    position: absolute;
    bottom: 18vh;

    .medal-bg {
      width: 38vw;
      margin: 0 auto;

      img {
        width: 100%;
      }
    }

    img {
      pointer-events: none;
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
  }
  .medal-imgs {
    width: 100vw;
    position: absolute;
    bottom: 25vh;
    display: flex;
    justify-content: center;
    .medal-bg {
      width: 32vw;
      margin: 0 9vw;

      img {
        width: 100%;
      }
    }

    img {
      pointer-events: none;
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
  }
  .avatar-bg {
    background-image: url("/assets/imgs/avatars-bg.png");
    background-size: 120px 120px;
    width: 120px;
    height: 120px;
    // margin: 3vh 10vw;
  }
  .buildA {
    position: fixed;
    width: 100vw;
    height: 100vh;
    bottom: 0;
    background-color: rgba(9, 9, 9, 0.8);
    .avatar-bg-build {
      background-image: url("/assets/imgs/avatars-bg.png");
      background-size: 50vw 50vw;
      width: 50vw;
      height: 50vw;
      margin: 20vh 25vw;
      position: relative;
      .close-icon {
        width: 35px;
        height: 35px;
        position: absolute;
        top: -40px;
        right: -20px;
      }
      .avatar-img-build {
        width: 40vw;
        height: 40vw;
        margin-top: 2vh;
        border-radius: 15px;
      }
      .medalSrc {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 50px;
        height: 70px;
      }
    }
  }
  .buildP {
    position: fixed;
    width: 100vw;
    height: 100vh;
    bottom: 0;
    background-color: rgba(9, 9, 9, 0.8);
  }
  .downTips {
    color: white;
    font-size: 16px;
    margin-top: 20px;
  }
}
.poster-imgs {
  position: fixed;
  // pointer-events: none;
  width: 100vw;
  height: 100vh;
  // opacity: 0;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;

  .poster-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    color: #fff;
  }

  .share-img {
    height: 100vh;
    width: 100vw;
    top: 0px;
    z-index: 99;
    position: absolute;
    opacity: 0; // 测试用
  }
}
.close-icon {
  width: 35px;
  height: 35px;
  position: absolute;
  top: 10vh;
  right: 10vw;
  z-index: 100;
}
.mask {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  pointer-events: none;
  background-color: #111111dd;
}
.downTips {
  color: white;
  font-size: 16px;
  margin-top: 20px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 10vh;
}
</style>
